<!--
 * @Descripttion: 啦啦啦哈哈哈
 * @version: 
 * @Author: lsy
 * @Date: 2021-08-30 17:16:55
 * @LastEditors: liushengyan
 * @LastEditTime: 2022-07-15 16:09:18
-->
<template>
  <div id="app_div" :style="{ height: clientHeight + 'px' }">
    <div class="star_contain">
      <div class="landscape"></div>
      <div class="filter"></div>
      <canvas id="canvas"></canvas>
    </div>
    <router-view />
  </div>
</template>

<script setup>
import drawStar from "@/utils/drawStar.js";

onMounted(() => {
  drawStar("canvas");
});
const clientHeight = ref(document.documentElement.clientHeight);
window.onresize = () => {
  clientHeight.value = document.documentElement.clientHeight;
};
</script>

<style lang="scss" scoped>
.star_contain {
  z-index: -1;
  position: absolute;
  margin: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  cursor: none;
  background: rgb(0, 0, 0);
  background: linear-gradient(to bottom, #000000 0%, #5788fe 100%);

  .filter {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #fe5757;
    animation: colorChange 30s ease-in-out infinite;
    animation-fill-mode: both;
    mix-blend-mode: overlay;
  }

  @keyframes colorChange {
    0%,
    100% {
      opacity: 0;
    }

    50% {
      opacity: 0.9;
    }
  }

  .landscape {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("/src/assets/images/xkbg.png");
    background-size: 1000px 250px;
    background-repeat: repeat-x;
    background-position: center bottom;
  }
}
</style>
